<template>
  <div class="top_box">
    <el-card style="width:1200px;height:130px">
      <div class="top_box_content">
        <div class="top_item" v-for="(item, index) in topData">
          <div
            class="top_item_box"
            :style="{ backgroundColor: item.color }"
          ></div>
          <div class="item_number">
            {{ item.number }}
          </div>
          <div class="item_text">
            {{ item.text }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
  <div class="container">
    <div class="calendar-container">
      <el-calendar v-model="value" />
    </div>
    <div class="todo-list-container">
      <el-card
        class="todo-card"
        v-for="(item, index) in todoItems"
        :key="index"
      >
        <div class="todo-item">
          <span class="todo-title">
            {{ item.title }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
          <span class="todo-status">
            {{ item.status }}&nbsp;&nbsp;&nbsp;&nbsp;
          </span>
          <span class="todo-name">{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
          <span class="todo-date">{{ item.date }}</span>
        </div>
      </el-card>
    </div>
  </div>
  <div class="container1">
    <div class="calendar-container1">
      <div ref="chartRef0" style="width: 600px; height: 400px;"></div>
    </div>
    <div class="todo-list-container1">
      <div ref="chartRef" style="width: 600px; height: 400px;"></div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElRow, ElCol, ElCard } from 'element-plus'
import * as echarts from 'echarts'
export default {
  components: {
    ElRow,
    ElCol,
    ElCard,
  },
  setup() {
    const topData = [
      {
        color: 'yellow',
        number: 10,
        text: '公寓总数量',
      },
      {
        color: 'blue',
        number: 100,
        text: '房屋总数量',
      },
      {
        color: 'aqua',
        number: 30,
        text: '个人租户总数量',
      },
      {
        color: 'orange',
        number: 40,
        text: '企业租户总数量',
      },
      {
        color: 'green',
        number: 90,
        text: '租房合同总数量',
      },
      {
        color: 'red',
        number: 80.6,
        text: '租金总收入',
      },
    ]
    const chartRef = ref(null) //饼状图
    onMounted(() => {
      const chart = echarts.init(chartRef.value)
      const option = {
        title: {
          text: '事项处理进度',
          left: 0,
        },
        series: [
          {
            type: 'pie',
            data: [
              { value: 230, name: '已完成' },
              { value: 310, name: '落后' },
              { value: 24, name: '进行中' },
            ],
          },
        ],
      }

      chart.setOption(option)
    })

    const chartRef0 = ref(null) //折线图
    onMounted(() => {
      const chart0 = echarts.init(chartRef0.value)
      const option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
          text: '公寓租住趋势',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: ['签约', '续租', '转租', '退租', '毁约'],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '签约',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)',
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: '续租',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)',
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: '转租',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(55, 162, 255)',
                },
                {
                  offset: 1,
                  color: 'rgb(116, 21, 219)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: '退租',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 0, 135)',
                },
                {
                  offset: 1,
                  color: 'rgb(135, 0, 157)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: '毁约',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: 'top',
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 191, 0)',
                },
                {
                  offset: 1,
                  color: 'rgb(224, 62, 76)',
                },
              ]),
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      }

      chart0.setOption(option)
    })

    const value = ref(new Date()) //日历

    const summary = ref({
      apartmentTotal: 20,
      houseTotal: 830,
      personalTenantTotal: 830,
      enterpriseTenantTotal: 83,
      contractTotal: 830,
      rentIncome: 80.5,
    })
    const todoItems = ref([
      {
        title: 'XX租户入住合同签约办理',
        status: '待办理',
        name: '苏娜',
        date: '2024-03-01',
      },
      {
        title: 'XX租户入住合同签约办理',
        status: '待办理',
        name: '李云迪',
        date: '2024-03-01',
      },
      {
        title: 'XX租户入住合同签约办理',
        status: '完成',
        name: 'pig',
        date: '2024-03-01',
      },
      {
        title: 'XX租户入住合同签约办理',
        status: '结束',
        name: '小六',
        date: '2024-03-01',
      },
      // 根据需要添加更多待办事项
    ])

    return {
      summary,
      todoItems,
      chartRef,
      chartRef0,
      topData,
    }
  },
}
</script>

<style scoped>
.data-summary .el-row {
  margin-bottom: 15px;
}
.top_box {
  width: 1000px;
}
.top_box_content {
  display: flex;
}
.top_item {
  width: 150px;
  margin-left: 70px;
}
.top_item_box {
  width: 50px;
  height: 50px;
  border-radius: 13px;
}
.data-summary .el-card {
  width: 100%;
}

.box-card {
  width: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 20px;
}
.el-calendar {
  --el-calendar-cell-width: 30px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
/* 外层容器使用 Flexbox 布局 */
.container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  height: 50vh; /* 容器高度设为视口的100% */
}

/* 两个子容器并排显示 */
.calendar-container {
  flex: 1; /* 两个子容器平分空间 */
  /* 内边距可根据需要调整 */
  /* 如果内容溢出，显示滚动条 */
  height: 300px;
  background-color: #f0f0f0;
}
.todo-list-container {
  margin-left: 20px;
  flex: 1; /* 两个子容器平分空间 */
  padding: 10px; /* 内边距可根据需要调整 */
  /* 如果内容溢出，显示滚动条 */
  background-color: white;
  height: 310px;
}

.container1 {
  margin-top: 0px;
  display: flex;
  width: 100%;
  height: 50vh; /* 容器高度设为视口的100% */
}

/* 两个子容器并排显示 */
.calendar-container1 {
  flex: 1; /* 两个子容器平分空间 */
  /* 内边距可根据需要调整 */
  /* 如果内容溢出，显示滚动条 */
  height: 300px;
  background-color: #f0f0f0;
}
.todo-list-container1 {
  margin-left: 20px;
  flex: 1; /* 两个子容器平分空间 */
  padding: 10px; /* 内边距可根据需要调整 */
  /* 如果内容溢出，显示滚动条 */
  background-color: white;
  height: 350px;
}
/* 待办事项容器样式 */
.todo-list-container {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  width: 100%;
}

.todo-card {
  width: 500px; /* 固定宽度 */
  /* 两个卡片并排，减去间距 */
  margin: 5px;
}

.todo-item {
  justify-content: space-between;
  align-items: left;
  width: 400px;
  white-space: nowrap;
}

.todo-title {
  font-size: 14px;
  font-weight: bold;
}

.todo-status,
.todo-name,
.todo-date {
  font-size: 14px;
  color: #666;
}
</style>
